<template>
  <div :class="['about', $ua.isFromPc() ? 'z-web' : 'z-phone']">
    <div class="line"></div>
    <div class="text">
      <div class="chinese">
        诗化海淀
      </div>
    </div>
    <div class="content">
      {{ aboutData }}
    </div>
    <div class="more-img" @click="goAbout">
      <img src="@/static/img/home/arrow.png" alt="">
    </div>
  </div>
</template>

<script>
export default {
  name: 'componentAbout',
  data() {
    return {
      aboutData: ''
    }
  },
  mounted() {
    this.getAboutUs()
  },
  methods: {
    getAboutUs() {
      this.$api.getAboutUs({}).then(res => {
        console.log(res)
        this.aboutData = res.result.item_list[0].text
      })
    },
    goAbout() {
      this.$router.push('/about')
      // this.$store.commit('router/setActiveRoute', { activeRouter: path })
    }
  }
}
</script>

<style lang="less" scoped>
  .about {
    &.z-web {
      padding: 150px 276px 300px;
      max-width: 100%;
      // width: pxtorem(100);
      .line {
        height: 1px;
        background-color: #E6D7D7;
      }

      .text {
        .chinese {
          font-size: 44px;
          font-family: SourceHanSerifSC;
          font-weight: 600;
          color: #000000;
        }

        div {
          writing-mode: vertical-lr;
          display: inline-block;
        }
        position: absolute;
        right: 142px;
      }

      .content {
        width: 663px;
        font-size: 24px;
        font-family: SourceHanSerifSC;
        font-weight: 600;
        color: #000000;
        line-height: 48px;
        margin: 65px 0;
        display: inline-block;
        text-indent: 2em;
      }

      .more-img {
        float: right;
        margin-top: 90px;
        cursor: pointer;
        // display: inline-block;
      }
    }

    &.z-phone {
      // max-width: pxtorem(750);
      padding: 0 0 pxtorem(175);
      position: relative;
      .line {
        width: pxtorem(624);
        height: 1px;
        background-color: #E6D7D7;
      }

      .text {
        .chinese {
          font-size: pxtorem(44);
          font-weight: 600;
          color: #000000;
        }

        div {
          writing-mode: vertical-lr;
          display: inline-block;
        }
        position: absolute;
        right: pxtorem(80);
      }

      .content {
        width: pxtorem(540);
        font-size: pxtorem(24);
        font-weight: 600;
        color: #000000;
        margin: pxtorem(80) 0 pxtorem(40) pxtorem(37);
        letter-spacing: pxtorem(2);
      }

      .more-img {
        width: pxtorem(540);
        text-align: right;

        img {
          width: pxtorem(42);
        }
      }
    }
  }
</style>